<template>
		<view class="g-button" :disabled="disabled" :class="[CPU_btn_type,CPU_size,CPU_plain,CPU_disabled,/*可拓展的类*/]"
			@tap="handle_click" :style="[CPU_custom]">
			<text class="textPadding"><slot/></text>
		</view>
</template>

<script>
	/*
	 * prop {Boolean} disabled 是否禁用
	 * prop {String} type 按钮样式 
	 * prop {String} size 按钮大小
	 * prop {Array} custom自定义参数
	 * @event {Function} handleClick 按钮点击
	 */
	export default {
		name:'g-button',
		data() {
			return {

			}
		},
		props: {
			disabled: {
				type: Boolean,
				default: false
			},
			width:'',
			type: {
				type: String,
				default: 'success'
			},
			plain: {
				type: Boolean,
				default: false
			},	
			size: {
				type: String,
				default: 'middle'
			},
			custom:{
				type:Array
			},
			
		},
		computed: {
			CPU_btn_type() {
				let typeStyle 
				if(this.plain||this.disabled){
					typeStyle=  `g-button-${this.type}-not-hover`
				}else{
					typeStyle = `g-button-${this.type}`
				}
				return typeStyle
			},
			CPU_plain() {
				let plainStyle = this.plain?`g-button-${this.type}--plain`:''
				return plainStyle
			}, //按钮的尺寸
			CPU_disabled() {
				let disabledStyle
				if(this.disabled&&!this.plain){
					disabledStyle =` g-button-${this.type}--disabled`
				}else if(this.disabled&&this.plain){
					disabledStyle = `g-button-${this.type}--plain--disabled`
				}else{
					disabledStyle=''
				}
				return disabledStyle
			},
			CPU_size() {
				return `g-button-size-${this.size}`
			}, //按钮的尺寸
			CPU_custom(){
				if(this.custom){
					return{
						'width':this.custom[0]+'rpx',
						'text-align':'center',
						'height':this.custom[1]+'rpx',
						// 'padding':this.config[0]?'0':'',
						'line-height':this.custom[1]+'rpx',
						'border-radius':this.custom[2]+'rpx',
						'padding':0,
					}
				}else{
					return ''
				}
			},
		},
		methods: {
			handle_click() {
				if(!this.disabled){
					this.$emit('handleClick')
				}
			},//暴露出去的事件
		},
		created() {

		}
	}
</script>
<style scoped lang="scss">
	@import "../../theme.scss";

	@mixin common($color) {
		background: $color;
		border: 2rpx solid $color;
		border-radius: 12rpx;
		color: #ffffff;
		transition: 0.1s;
	}
	@mixin common-info($color) {
		background: $color;
		border: 2rpx solid $color;
		border-radius: 12rpx;
		color: #4a4a4a;
		transition: 0.1s;
	}
	@mixin hovercommon($color-bg) {
		background-color:mix($color-bg, #474747,85%);
		border-radius: 12rpx;
		border: 2rpx solid mix($color-bg, #474747,85%);
		color: #ffffff;
	}
	//抽离的公共样式
	@mixin common-disabled($color-bg) {
		background-color:$color-bg;
		border: 2rpx solid $color-bg;
		border-radius: 12rpx;
		color:$g-text-grey;
		filter: opacity(38%);
		cursor: not-allowed
	}//普通样式的禁用

	@mixin plain-disabled($color) {
		background: $g-text-light;
		border: 2rpx solid $g-text-light;
		border-radius: 12rpx;
		border: 2rpx solid $color;
		filter: opacity(38%);
		cursor: not-allowed
	}
	//朴素类型的禁用
	@mixin plain($color) {
		background: $g-text-light;
		border: 2rpx solid $color;
		color: $color;
		&--disabled{
			@include plain-disabled($color);
		}
	}//plain的样式，和禁用的样式

	//抽离的朴素样式
	@mixin disabled {}
	.textPadding{
		//解决与	box-sizing:border-box 冲突问题
		text-align: center;
		padding: 0 18rpx;
	}
	.g-button {
		min-width: 0;
		display: inline-block;
		&-primary {
			@include common($g-main-primary);
			&:hover{
				@include hovercommon($g-main-primary);
			}
			&-not-hover {
				@include common($g-main-primary);
	        };//当plain和disable任意出现一个即采用这个样式
			&--plain {
				@include plain($g-main-primary);
			};
			&--disabled[disabled] {
				@include common-disabled($g-main-primary)
			};
		};
		&-danger {
			@include common($g-main-danger);
			&:hover{
				@include hovercommon($g-main-danger);
			}
			&-not-hover {
				@include common($g-main-danger);
		    };//当plain和disable任意出现一个即采用这个样式
			&--plain {
				@include plain($g-main-danger);
			};
			&--disabled[disabled] {
				@include common-disabled($g-main-danger)
			};
		};
		
		&-warning {
			@include common($g-main-warning);
			&:hover{
				@include hovercommon($g-main-warning);
			}
			&-not-hover {
				@include common($g-main-warning);
		    };//当plain和disable任意出现一个即采用这个样式
			&--plain {
				@include plain($g-main-warning);
			};
			&--disabled[disabled] {
				@include common-disabled($g-main-warning)
			};
		};
		
		&-success {
			@include common($g-main-success);
			&:hover{
				@include hovercommon($g-main-success);
			}
			&-not-hover {
				@include common($g-main-success);
		    };//当plain和disable任意出现一个即采用这个样式
			&--plain {
				@include plain($g-main-success);
			};
			&--disabled[disabled] {
				@include common-disabled($g-main-success)
			};
		};
		
		&-info {
			@include common-info($g-main-info);
			&:hover{
				@include hovercommon($g-main-info);
			}
			&-not-hover {
				@include common($g-main-info);
		    };//当plain和disable任意出现一个即采用这个样式
			&--plain {
				@include plain($g-main-info);
			};
			&--disabled[disabled] {
				@include common-disabled($g-main-info)
			};
		};
		
		&-size {
			&-larger {
				box-sizing: border-box;
				width: 504rpx;
				line-height: 90rpx;
				text-align: center;
				height: 92rpx;	
				font-size: 36rpx;
			};
			&-large{
				box-sizing: border-box;
				width: 304rpx;
				line-height: 90rpx;
				text-align: center;
				height: 92rpx;	
				font-size: 36rpx;
			};
			&-middle {
				box-sizing: border-box;
				text-align: center;
				padding: 14rpx 8rpx;
				font-size: 32rpx;
			};
			&-mini {
				box-sizing: border-box;
				padding: 6rpx 10rpx;
				font-size: 24rpx;
			};
		}
	}
</style>
